<template>
<view :class="['page',{'lock': isLock}]">
    <!-- 自定义头部 -->
    <CustomHeader bgColor="#fff" fixed>
        <template #capsule>
            <view class="filterBox" @click="switchCascader">
                <text class="city">{{config.cityName}}</text>
                <nut-icon name="rect-down" size="14" class="downArrow"></nut-icon>
            </view>
            <view class="searchBox">
                <nut-searchbar v-model="keyword" :clearable="false">
                    <template v-slot:leftin>
                        <nut-icon size="14" name="search2"></nut-icon>
                    </template>
                </nut-searchbar>
            </view>
        </template>
    </CustomHeader>
    <!-- 滚动公告和轮播图 -->
    <NoticeAndSwiper/>
    <!-- 列表 -->
    <StarAct :ref="el => myRefs['star']=el" v-if="user.mode===1" :search="keyword" @toggle="toggleLock"/>
    <TalentAct :ref="el => myRefs['talent']=el" v-else :search="keyword"></TalentAct>
    <!-- 切换 -->
    <view class="fixedBtn">
        <cdn-img v-if="user.mode===2" src="/static/img/apply_star.png" class="btn apply_star" @click="user.switchMode(1)"/>
        <cdn-img v-else src="/static/img/apply_shoot.png" class="btn apply_star" @click="user.switchMode(2)"/>
    </view>
    <!-- 地区选择 -->
    <view class="cascader"  v-if="config.oemArea.length>0">
        <nut-cascader
            title="切换城市"
            v-model:visible="showCascader"
            v-model="config.cityCode"
            @change="switchCity"
            @path-change="pathChange"
            :options="config.oemArea"
            text-key="name"
            value-key="id"
            :safe-area-inset-bottom="true"
        ></nut-cascader>
    </view>
</view>
</template>

<script>
import { ref, reactive, onBeforeMount } from 'vue'
import { useUserStore, useConfigStore } from "@/stores";
import { useReachBottom, stopPullDownRefresh, usePullDownRefresh, useDidShow, useLoad, setStorageSync } from '@tarojs/taro'
import { getUrlParams } from '@/utils/helper'
import CustomHeader from "@/components/CustomHeader";
import NoticeAndSwiper from '@/components/NoticeAndSwiper'
import StarAct from '@/components/Act/Star'
import TalentAct from '@/components/Act/talent'
import "./index.scss";

export default{
    components: { CustomHeader, NoticeAndSwiper, StarAct, TalentAct },
    setup(){
        const user = useUserStore()
        const config = useConfigStore()
        const keyword = ref('')
        const isLock = ref(false)
        const myRefs = reactive({})
        onBeforeMount(async() => {
            // 获取自定义公共头部的高度
            config.getHeaderHeight(); 
            // 开启分享
            wx.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline'],
            })
            // 获取定位
            await user.updataLocation();
            // 获取OEM信息
            await config.getOemInfo().then(areaCode => config.getOemArea(areaCode));
        });
        useLoad(async(query)=>{
            const url = decodeURIComponent(query.q)
            console.log(3333, url)
            if(url){
                const from_id = getUrlParams(url, 'from_id')
                if(from_id){
                    setStorageSync('from_id', from_id)
                }
            }
        })
        useDidShow(()=>{
            config.setSelecTab(0)
        })
        usePullDownRefresh(()=>{ // 当首页激活
            const str = (user.mode===1 ? 'star' : 'talent')
            myRefs[str].handleChange()
            stopPullDownRefresh()
        })

        useReachBottom(()=>{
            console.log('触发底部')
            const str = (user.mode===1 ? 'star' : 'talent')
            myRefs[str].loadMore()
        })

        const showCascader = ref(false)
        function switchCascader(e){
            e.preventDefault()
            e.stopPropagation()
            showCascader.value = !showCascader.value
        }
        function switchCity(value, node){
            config.setCity(value, node[node.length-1].text);
        }
        function pathChange(...args){
            // console.log('change222', ...args);
        }
        function toggleLock(val){
            isLock.value = val
        }
        return {
            user,
            config,
            keyword,
            myRefs,
            isLock,
            showCascader,
            switchCascader,
            switchCity,
            pathChange,
            toggleLock,
        }
    },
    onShareAppMessage(res){
        // console.log(333, res)
        const { share_title, share_img } = this.config.oemInfo
        return {
            title: share_title,
            path: `/pages/home/index?from_id=${this.user.info.id}`,
            imageUrl: share_img,
        }
    },
    onShareTimeline(){
        const { share_title, share_img } = this.config.oemInfo
        return {
            title: share_title,
            imageUrl: share_img,
            query: `from_id=${this.user.info.id}`
        }
    },
}
</script>
